<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px;">
      <a-breadcrumb-item>考勤管理</a-breadcrumb-item>
      <a-breadcrumb-item>排班管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="6">
        行动类型：
        <a-select placeholder="请选择行动类型">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        问题来源：
        <a-select placeholder="请选择问题来源">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        关联对象：
        <a-input placeholder="请输入关联对象"/>
      </a-col>
      <a-col :span="6">
        问题类型：
        <a-select placeholder="请选择问题类型">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="5">
        问题等级：
        <a-select placeholder="请选择问题等级">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="5">
        业务进展：
        <a-select placeholder="请选择业务进展">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="10">
        上报时间范围：
        <a-range-picker/>
      </a-col>
      <a-col :span="4">
        <a-button type="primary">
          查询
        </a-button>&emsp;&nbsp;
        <a-button>重置</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="24">
          <div class="flex-end">
            <a-button type="primary"
                      @click="handleOperation('Report')">新增班次
            </a-button>
          </div>
          <a-table :columns="columns"
                   :data-source="tableData"
                   :scroll="{ x: 2000 }"
          >
            <span slot="zt"
                  slot-scope="text, record">
              <a-switch default-checked/>
            </span>
            <span slot="action"
                  slot-scope="text, record">
              <a class="blue"
                 @click="detailFn(text,record)">查看</a>
              <a-divider type="vertical"/>
              <a v-hasPermi="['pbgl:edit']"
                 class="blue"
                 @click="detailFn(text,record)">修改</a>
              <a-divider type="vertical"/>
              <a v-hasPermi="['pbgl:del']"
                 class="red"
                 @click="delFn(text,record)">删除</a>
            </span>
          </a-table>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>
<script>
import {message, Modal} from 'ant-design-vue'

const columns = [
  {
    title: '用户ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
  },
  {
    title: '工作人员',
    dataIndex: 'id',
    key: 'id',
    width: 100,
  },
  {
    title: '上班打卡时间',
    dataIndex: 'schedulingName',
    key: 'schedulingName',
    width: 160,
  },
  {
    title: '下班打卡时间',
    dataIndex: 'schedulingName',
    key: 'schedulingName',
    width: 160,
  },
  {
    title: '最近一次打卡地点',
    dataIndex: 'schedulingType',
    key: 'schedulingType',
    width: 140,
  },
  {
    title: '最近一次打卡时间',
    width: 200,
  },
  {
    title: '最近一次打卡状态',
    width: 120,
  },
  {
    title: '当月考勤状态',
    dataIndex: 'startTime',
    key: 'startTime',
    width: 160,
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
    fixed: 'right',
  },
]

export default {
  data() {
    return {
      tableData: [],
      columns,
      queryForm: {current: 20, offset: 1},
      loading: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      const url = 'government-platform-center/schedulingType'
      this.$axios.get(url, this.queryForm).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    detailFn(text) {
      this.$router.push({
        path: `/PbglDetail`,
        query: {id: text.id},
      })
    },
    delFn(text, record) {
      console.log(text, record)
      const that = this
      Modal.confirm({
        title: '确认删除',
        content: '您确定要删除这项内容吗？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          const url = `/government-platform-center/schedulingType?id=${text.id}`
          that.$axios.delete(url).then((res) => {
            if (res.data.code == 0) {
              that.getList()
              message.success('操作成功')
            }
          })
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log('删除已取消')
        },
      })
    },
  },
}
</script>
<style scoped>

.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-switch-checked {
  background: #13c75b;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}
</style>
